<template>
	<view class="use page">
		<scroll-view scroll-y="true" class="bgf5 list">
			<image class="w-20 mx16" src="/static/img/bg/usebg.png" mode="widthFix"></image>
			<view class="bgff px12 pt14 pb4 mx16 mt-50">
				<view v-for="(item,index) in list" :key="index" @click="selectIndex(index)" class="flex flexC mb8 px35 py4 r3 rel"
					:class="index == currentIndex ? 'bgf6c py8' : 'bgac'">
					<view v-if="index == 2" class="flex flexC flexCol px5 py6 cfb r3 tui cff fs12">
						<view class="">推</view>
						<view class="">荐</view>
					</view>
					<view class="flex1 c57">
						<text class="bold6 fs26">{{item.hour}}</text>
						<text class="fs14 ml4">小时</text>
					</view>
					<view class="">
						<text class="cff0">{{item.price}}元</text>
<!-- 						<text class="c99 fs10 ml8 lines">0.02元</text>
 -->					</view>
				</view>
			</view>
		</scroll-view>

		<view class="pb12 bgf5 px16 fixed boxS">
			<view class="flex flexC flexW aliC bgff pt14 fs13">
				<navigator url="/pages/member/join" class="w-5 mb12" hover-class="none">
					<image class="w28" src="/static/img/icon/join2.png" mode="aspectFill"></image>
					<view>加入我们</view>
				</navigator>
				<view class="w-5 mb12" @click="kf">
					<image class="w28" src="/static/img/icon/jiang.png" mode="aspectFill"></image>
					<view>介绍有奖</view>
				</view>
				<view class="w-5 mb12" @click="charge">
					<image class="w28" src="/static/img/icon/chong.png" mode="aspectFill"></image>
					<view>充值更优惠</view>
				</view>
				<view class="w-5 mb12" @click="kf">
					<image class="w28" src="/static/img/icon/kfa.png" mode="aspectFill"></image>
					<view>客服</view>
				</view>
			</view>

			<view class="flex flexB flexC">
				<button @click="addBook" class="bgf6c mt12 r3 fs14 py5 flex1 mr10">去支付</button>
				<button @click="showOpenCode"  class="bgf6c mt12 r3 fs14 py5 flex1 ">密码开锁</button>
			</view>

		</view>
		
		<uni-popup type="bottom" ref="passwordPopup" class="pwdPopup">
			<view class="bgff r10 inpbox aliC px20 py30 mx40">
				<text @click="closePopup" class="fs24 c99 px12 py6 colse">×</text>
				<view class="fs18 mb12">请输入开门密码</view>
				<view class="mb20"></view>
				<password-input :numLng='openCode'></password-input>
			</view>
			<number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel: '',
				shop_id: '',
				room_id: '',
				list:[],
				currentIndex:0,
				order_no:'',
				hour:'',
				openCode:''
			};
		},
		onLoad(option) {

			if (option.q) {
				let scan_url = decodeURIComponent(option.q);

				console.info("===option==" + scan_url)

				var index = scan_url.lastIndexOf("\/");
				var result = scan_url.substring(index + 1, scan_url.length);
				this.shop_id = result.split("-")[0];
				this.room_id = result.split("-")[1];
				console.info("===result==" + result)
				this.getHourList();
			}
		},
		methods: {
			
			showOpenCode(){
				this.$refs.passwordPopup.open()
				this.$refs.KeyboarHid.open()
			},
			
			closePopup() {
				this.$refs.passwordPopup.close()
				this.$refs.KeyboarHid.close()
			},
			
			
			selectIndex(index){
				this.currentIndex = index;
			},
			
			open(){
				
				this.closePopup();
				var type = "room";
				if(this.room_id == -1){
					type = "door";
				}
				let param = {
					type:type,
					code:this.openCode
				};
				let that = this;
				this.$api.open(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
					
					
					} 
					uni.showToast({
						icon:'none',
						title:res.msg
					})
				})
				
			},
			
			onInput(val) {
				this.openCode = val;
				if(val.length == 6){
					this.open();
				}
				console.log(this.openCode)
				
			},
			getHourList(){
				let that = this;
				
				let param = {
					shop_id:this.shop_id,
					room_id:this.room_id
				};
				
				this.$api.hourList(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
						that.hour = that.list[0].hour;
					} else {
				
					}
				})
			},
			
			
			restore(){
				let param = {
					order_no: this.order_no,	
				};
				let that = this;
				this.$api.restore(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},
			
			addBook() {
				let param = {
					id: this.room_id,
					hour:this.hour
				
				};
				
				if(this.hour == ''){
					
					uni.showToast({
						title:"请扫房间二维码",
						icon:'none'
					})
					
					return;
				}
				console.info("==param==" + JSON.stringify(param))
				let that = this;
				this.$api.scanAddOrder(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {	
						that.order_no = res.data.order_no;
						if(res.data.payInfo != ''){
							that.wechatPay(res.data.payInfo)
						}else{
							uni.redirectTo({
								url:'../order/detail?order_no='+that.order_no
							})
						}
			
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},
			
			
			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.timeStamp,
					nonceStr: payConfig.nonceStr,
					package: payConfig.package,
					signType: payConfig.signType,
					paySign: payConfig.paySign,
					success: function(res) {
						
						uni.redirectTo({
							url:'../order/detail?order_no='+that.order_no
						})
					
					},
					fail: function(err) {
						that.restore();
						uni.showToast({
							title: "取消预定",
							icon: 'none'
						});
					}
				});
			},

			kf() {
				uni.makePhoneCall({
					phoneNumber: this.tel
				})
			},

			charge() {
				uni.switchTab({
					url: '../discount/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.use {
		.list {
			height: calc(100vh - 290rpx);
		}

		.mt-50 {
			margin-top: -120rpx;
			position: relative;
			z-index: 1;
			border-bottom: 20rpx solid #f5f5f5;
		}

		.lines {
			text-decoration-line: line-through;
		}

		.bgac {
			background-color: #ACBEF3;
		}

		.bgf6c {

			.c57,
			.cff0,
			.c99 {
				color: #fff;
			}
		}

		.rel {
			position: relative;
		}

		.tui {
			background-color: #FB7373;
			line-height: 26rpx;
			position: absolute;
			left: -14rpx;
		}

		.w28 {
			width: 56rpx;
			height: 56rpx;
		}

		.fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			z-index: 2;
		}
		
		.pwdPopup {
			/deep/.uni-popup__wrapper {height: 80vh;}
			.inpbox {
				position: relative;
				.colse {position: absolute;top: 0;right: 0;}
			}
		}
	}
</style>
